<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <title>关于我</title>
</head>
<body>
    <!-- 导航 -->
    <nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment m-padd-tb-mini m-shadow-small"/>

    <!-- 中间内容 -->
    <div class="m-container m-padded-tb-big">
        <div class="ui container">

            <div class="ui stackable grid">
                <div class="eleven wide column">
                    <div class="ui segment">
                        <img th:src="@{http://101.132.152.66:8080/images/pdx.jpg}" class="ui rounded image" alt="" style="width: 600em;">
                    </div>
                </div>
                <div class="five wide column">
                    <div class="ui top attached segment">
                        <div class="ui header">关于我</div>
                    </div>
                    <div class="ui attached segment">
                        <p class="m-text-thin">派大星，一个打工仔，希望可以有共同成长的伙伴</p>
                        <p class="m-text-thin">热爱生活，喜欢编程，正在探索学习的方向并一直在努力</p>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui orange basic left pointing label">编程</div>
                        <div class="ui orange basic left pointing label">游戏</div>
                        <div class="ui orange basic left pointing label">动漫</div>
                        <div class="ui orange basic left pointing label">火锅</div>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui teal basic left pointing label m-margin-tb-tiny">Java</div>
                        <div class="ui teal basic left pointing label m-margin-tb-tiny">Linux</div>
                        <div class="ui teal basic left pointing label m-margin-tb-tiny">MySQL</div>
                        <div class="ui teal basic left pointing label m-margin-tb-tiny">Docker</div>
                        <div class="ui teal basic left pointing label m-margin-tb-tiny">Redis</div>
                        <div class="ui teal basic left pointing label m-margin-tb-tiny">RabbitMQ</div>
                    </div>
                    <div class="ui bottom attached segment">
                        <a href="https://gitee.com/shen_guo_ji" target="_blank" class="ui circular icon button"><i class="github icon"></i></a>
                        <a href="#" class="ui wechat circular icon button"><i class="wechat icon"></i></a>
                        <a href="#" class="ui qq circular icon button"><i class="qq icon"></i></a>
                    </div>
                    <div class="ui wechat-qr flowing popup transition hidden">
                        <img th:src="@{http://101.132.152.66:8080/images/wx.jpg}" style="width: 130px" alt="" class="ui rounded image">
                    </div>
                    <div class="ui qq-qr flowing popup transition hidden">
                        <img th:src="@{http://101.132.152.66:8080/images/qq.png}" style="width: 130px" alt="" class="ui rounded image">
                    </div>
                </div>
            </div>
        </div>
    </div>
<br>
<br>
    <!-- 底部footer -->
    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"/>

    <!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script type="text/javascript" color="0,0,205" opacity='0.7' zIndex="-2" count="99"
            src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
    <!--/*/</th:block>/*/-->

    <script>
        $('.menu.toggle').click(function () {
           $('.m-item').toggleClass('m-mobile-hide');
        });

        $('.qq').popup({
            popup : $('.qq-qr.popup'),
            on : 'hover',
            position : 'bottom center'
        });

        $('.wechat').popup({
            popup : $('.wechat-qr.popup'),
            on : 'hover',
            position : 'bottom center'
        });
    </script>
</body>
</html>